{{ template "head" .}}

    <div id="ui-alert" class="section">
        <div class="row">
            <!--SIMPLE-->
            <div class="col s12 m4 l4">
                <p><strong>SIMPLE</strong></p>
                <p>Add materialize lighten color contextual class.</p>

                <div id="card-alert" class="card light-blue lighten-5">
                    <div class="card-content light-blue-text">
                        <p>NEWS : You have done 5 actions.</p>
                    </div>
                </div>

                <div id="card-alert" class="card deep-purple lighten-5">
                    <div class="card-content deep-purple-text">
                        <p>INFO : You have 18 messages</p>
                    </div>
                    <button type="button" class="close deep-purple-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card green lighten-5">
                    <div class="card-content green-text">
                        <p>SUCCESS : The page has been added.</p>
                    </div>
                    <button type="button" class="close green-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card red lighten-5">
                    <div class="card-content red-text">
                        <p>DANGER : The daily report has failed</p>
                    </div>
                    <button type="button" class="close red-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card orange lighten-5">
                    <div class="card-content orange-text">
                        <p>WARNING : Bandwidth limit exceeded</p>
                    </div>
                    <button type="button" class="close orange-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

            </div>
            <!--DARK-->
            <div class="col s12 m4 l4">
                <p><strong>DARK</strong></p>
                <p>Add materialize base color contextual class.</p>

                <div id="card-alert" class="card light-blue">
                    <div class="card-content white-text">
                        <p>NEWS : You have done 5 actions.</p>
                    </div>
                </div>

                <div id="card-alert" class="card deep-purple">
                    <div class="card-content white-text">
                        <p>INFO : You have 18 messages</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card green">
                    <div class="card-content white-text">
                        <p>SUCCESS : The page has been added.</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card red">
                    <div class="card-content white-text">
                        <p>DANGER : The daily report has failed</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card orange">
                    <div class="card-content white-text">
                        <p>WARNING : Bandwidth limit exceeded</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
            </div>
            <!--WITH ICON-->
            <div class="col s12 m4 l4">
                <p><strong>WITH ICON</strong></p>
                <p>Add materialize icons class.</p>

                <div id="card-alert" class="card light-blue">
                    <div class="card-content white-text">
                        <p><i class="mdi-social-notifications"></i> NEWS : You have done 5 actions.</p>
                    </div>
                </div>

                <div id="card-alert" class="card deep-purple">
                    <div class="card-content white-text">
                        <p><i class="mdi-action-info-outline"></i> INFO : You have 18 messages</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card green">
                    <div class="card-content white-text">
                        <p><i class="mdi-navigation-check"></i> SUCCESS : The page has been added.</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card red">
                    <div class="card-content white-text">
                        <p><i class="mdi-alert-error"></i> DANGER : The daily report has failed</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card orange">
                    <div class="card-content white-text">
                        <p><i class="mdi-alert-warning"></i> WARNING : Bandwidth limit exceeded</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="divider"></div>
        <div class="row">
            <!--DARK-->
            <div class="col s12 m4 l4">
                <p><strong>WITH TITLE</strong></p>
                <p>Add title class.</p>

                <div id="card-alert" class="card cyan lighten-5">
                    <div class="card-content cyan-text darken-1">
                        <span class="card-title cyan-text darken-1">Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <button type="button" class="close cyan-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card cyan lighten-5">
                    <div class="card-content cyan-text darken-1">
                        <span class="card-title cyan-text darken-1">Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <button type="button" class="close cyan-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card deep-purple">
                    <div class="card-content white-text">
                        <span class="card-title white-text darken-1">Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card green">
                    <div class="card-content white-text">
                        <span class="card-title white-text darken-1"><i class="mdi-social-notifications"></i>  Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

            </div>
            <!--WITH Title & ICON-->
            <div class="col s12 m4 l4">
                <p><strong>WITH ACTION BUTTONS</strong></p>
                <p>Add materialize button for actions.</p>
                <div id="card-alert" class="card pink lighten-5">
                    <div class="card-content pink-text darken-1">
                        <span class="card-title pink-text darken-1">Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <div class="card-action pink lighten-4">
                        <a href="#" class="pink-text">Ok</a>
                        <a href="#" class="pink-text">Cancel</a>
                    </div>
                    <button type="button" class="close pink-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card deep-purple">
                    <div class="card-content white-text">
                        <span class="card-title white-text darken-1">Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <div class="card-action deep-purple darken-2">
                        <a class="waves-effect waves-light  btn white-text">Ok</a>
                        <a class="waves-effect waves-light  btn white-text">Cancel</a>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card green">
                    <div class="card-content white-text">
                        <span class="card-title white-text darken-1"><i class="mdi-social-notifications"></i>  Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <div class="card-action green darken-2">
                        <a class="btn-flat waves-effect light-blue white-text"><i class="mdi-navigation-check left"></i> Ok</a>
                        <a class="btn-flat waves-effect red accent-2 white-text"><i class="mdi-content-clear left"></i> Cancle</a>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

            </div>
            <!--WITH Avatar-->
            <div class="col s12 m4 l4">
                <p><strong>WITH AVATAR</strong></p>
                <p>Add avatar on alerts.</p>

                <div id="card-alert" class="card cyan lighten-5">
                    <div class="card-content cyan-text">
                        <p class="single-alert">
                            <img src="/statics/images/avatar.jpg" alt="avatar" class="alert-circle responsive-img valign profile-image"/>
                            <span>You have new task.</span>
                        </p>
                    </div>
                    <button type="button" class="close cyan-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card light-blue">
                    <div class="card-content white-text">
                        <p class="single-alert">
                            <img src="/statics/images/avatar.jpg" alt="avatar" class="alert-circle responsive-img valign profile-image"/>
                            <span>You have new task.</span>
                        </p>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card cyan">
                    <div class="card-content white-text">
                        <img src="/statics/images/avatar.jpg" alt="avatar" class="alert-circle responsive-img valign profile-image"/>
                        <span class="card-title white-text darken-1">Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <div class="card-action cyan darken-1">
                        <a href="#" class="white-text">Ok</a>
                        <a href="#" class="white-text">Cancel</a>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div id="card-alert" class="card green">
                    <div class="card-content white-text">
                        <img src="/statics/images/avatar.jpg" alt="avatar" class="alert-circle responsive-img valign profile-image"/>
                        <span class="card-title white-text darken-1"><i class="mdi-social-notifications"></i>  Some Message</span>
                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                    </div>
                    <div class="card-action green darken-2">
                        <a class="btn-flat waves-effect light-blue white-text"><i class="mdi-navigation-check left"></i> Ok</a>
                        <a class="btn-flat waves-effect red accent-2 white-text"><i class="mdi-content-clear left"></i> Cancle</a>
                    </div>
                    <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

            </div>

        </div>
    </div>
    <!-- Floating Action Button -->
    <div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
        <a class="btn-floating btn-large">
            <i class="mdi-action-stars"></i>
        </a>
        <ul>
            <li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a></li>
            <li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a></li>
            <li><a href="app-calendar.html" class="btn-floating green"><i class="large mdi-editor-insert-invitation"></i></a></li>
            <li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
        </ul>
    </div>
    <!-- Floating Action Button -->
</div>
<!--数据结束-->



<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- 消息中心开始-->
</section>

{{ template "foot" }}






<!-- ================================================
Scripts
================================================ -->

<!-- jQuery Library -->
<script type="text/javascript" src="/statics/js/plugins/jquery-1.11.2.min.js"></script>
<!--angularjs-->
<script type="text/javascript" src="/statics/js/plugins/angular.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="/statics/js/materialize.min.js"></script>
<!--prism -->
<script type="text/javascript" src="/statics/js/plugins/prism/prism.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="/statics/js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- chartist -->
<script type="text/javascript" src="/statics/js/plugins/chartist-js/chartist.min.js"></script>
<!--nestable -->
<link href="/statics/js/plugins/jquery.nestable/nestable.css" type="text/css" rel="stylesheet" media="screen,projection">
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="/statics/js/plugins.min.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="/statics/js/custom-script.js"></script>






</body>

</html>

